<!DOCTYPE html>
<!-- include a-frame -->
<!-- <script src="vendor/aframe/build/aframe.js"></script> -->
<script src="vendor/aframe/build/aframe.min.js"></script>
<!-- include ar.js -->
<script src='../build/aframe-ar.js'></script>
<script>ARjs.Context.baseURL = '../../three.js/'</script>

<body style='margin : 0px; overflow: hidden; font-family: Monospace; background-color: black;'>
	<div style='position: fixed; top: 10px; width:100%; text-align: center; z-index: 1;'>
		<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - tango example for a-frame by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
		<br/>
		<strong>Tracking Method:</strong> <span id='trackingMethod'>unknown</span>
		- 
		Switch to : 
		<a href='?artoolkit'>artoolkit</a>
		/ 
		<a href='?aruco'>aruco</a>
		/ 
		<a href='?area-artoolkit'>area artoolkit</a>
		/ 
		<a href='?area-aruco'>area aruco</a>
		/ 
		<a href='?tango'>tango</a>
		/ 
		<a href='?best'>best</a>
		<div id="arjsDebugUIContainer"></div>
	</div>
<script>
	var trackingMethod = location.search.substring(1) || 'best'
	document.querySelector('#trackingMethod').innerHTML = trackingMethod
	

	var sceneEl = document.createElement('a-scene')
	sceneEl.setAttribute('embedded', 'true')
	sceneEl.setAttribute('arjs', 'debugUIEnabled: true; trackingMethod: '+trackingMethod)


	var parsedTrackingMethod = ARjs.Utils.parseTrackingMethod(trackingMethod)
	if( parsedTrackingMethod.trackingBackend === 'tango' ){
		var changeMatrixMode = 'cameraTransformMatrix'
	}else{
		var changeMatrixMode = 'modelViewMatrix'		
	}

	if( changeMatrixMode === 'modelViewMatrix' ){
		var markerEl = document.createElement('a-anchor')
		markerEl.setAttribute('hit-testing-enabled', 'true')
		sceneEl.appendChild(markerEl)

		var boxEl = document.createElement('a-box')
		boxEl.setAttribute('position', '0 0.5 0')
		boxEl.setAttribute('material', 'opacity: 0.5; side:double; color:red;')
		markerEl.appendChild(boxEl)
		
		var cameraEl = document.createElement('a-entity')
		cameraEl.setAttribute('camera', '')
		sceneEl.appendChild(cameraEl)
	}else if( changeMatrixMode === 'cameraTransformMatrix' ){
		var boxEl = document.createElement('a-box')
		boxEl.setAttribute('position', '0 0.5 0')
		boxEl.setAttribute('material', 'opacity: 0.5; side:double; color:red;')
		sceneEl.appendChild(boxEl)
		
		var cameraEl = document.createElement('a-marker-camera')
		sceneEl.appendChild(cameraEl)
	}else console.assert(false)

	
	document.body.appendChild(sceneEl)
</script>
</body>
</html>
